<template>
	<view class="page">
		<!-- <u-navbar title="忘记密码" :placeholder="true" :titleStyle="titleStyle" leftIconColor="#fff" :bgColor="bgColor"   :autoBack="true" ></u-navbar> -->
		<headerinfo></headerinfo>
		<view class="width60" style="background-color: #fff;">
			<view class="login_form">
				<view class="back" @click="back">
					<image src="../../static/images/backimg.png" mode="widthFix"></image>
				</view>
				<image src="../../static/images/logo.png" mode="widthFix"
					style="width: 280rpx;height: auto;margin: 30rpx auto;display: block;margin-top: 0;"></image>

				<view class="list">
					<view class="label ">用户名</view>
					<u--input type="text" fontSize="15" border="none" placeholder="请输入用户名"
						v-model="form.username"></u--input>
				</view>
				<!-- <view class="list">
					<view class="label ">手机号</view>
					<u--input type="number" maxlength="11" fontSize="15" border="none" placeholder="请输入手机号" v-model="form.phone"></u--input>
				</view>
				<view class="list">
					<view class="label ">验证码</view>
					<u--input type="number" fontSize="15" border="none" placeholder="请输入验证码" v-model="form.code"></u--input>
					<span style="margin-right: 20rpx;color: #08C060;"  @tap="getCode" :text="tips">{{tips}}</span>
				</view> -->
				<view class="list">
					<view class="label ">新密码</view>
					<u--input type="text" fontSize="15" border="none" placeholder="请输入新密码"
						v-model="form.newPassword"></u--input>
				</view>

				<view class="list">
					<view class="label ">确认密码</view>
					<u--input type="text" fontSize="15" border="none" placeholder="请输入确认密码"
						v-model="form.newPassword2"></u--input>
				</view>

				<view class="loginBtn main-bg-color" @click="submit">提 交</view>
			</view>
		</view>



		<u-code :seconds="seconds" ref="uCode" @change="codeChange"></u-code>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bgColor: '#08C060',
				titleStyle: {
					color: '#fff'
				},
				form: {
					username: '',
					phone: '',
					code: '',
					newPassword: '',
					newPassword2: '',
				},
				Phone: '',
				tips: '',
				seconds: 60,
			};
		},
		onLoad() {},
		methods: {
			back() {
				uni.reLaunch({
					url: '/pages/login/index'
				})
			},
			submit() {

				// if(!this.$utils.checkModbile(this.form.phone)){
				// 	return this.$Show.show('手机号格式不正确')
				// }

				// if(this.form.code == '' ){
				// 	return this.$Show.show('验证码不能为空')
				// }

				if (this.form.newPassword == '') {
					return this.$Show.show('新密码不能为空')
				}

				if (this.form.newPassword2 == '') {
					return this.$Show.show('确认密码不能为空')
				}

				this.$api.forgetPassword(this.form).then(res => {
					console.log(res)
					this.$Show.successJump('修改成功')
				})
			},

			//验证码相关
			codeChange(text) {
				this.tips = text;
			},
			getCode() {

				if (!this.$utils.checkModbile(this.form.phone)) {
					return this.$Show.show('手机号格式不正确')
				}

				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					});


					this.$api.getPhoneCode({
						phone: this.form.phone
					}).then(res => {
						uni.$u.toast('验证码已发送');
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();
					})
				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},

		}
	};
</script>

<style lang="scss">
	.login_form {
		width: 100%;
		border-radius: 10px;
		background-color: #fff;
		padding-bottom: 40rpx;
		margin: 0 auto;

		.back {
			margin: 30rpx;
			margin-bottom: 0;
			cursor: pointer;

			image {
				width: 70rpx;
				height: auto;
			}
		}

		.list {
			display: flex;
			align-items: center;
			height: 100rpx;
			border-bottom: 1px solid #f8f8f8;
			position: relative;

			.label {
				width: 140rpx;
				text-align: right;
				margin-right: 20rpx;
			}

			.sendCode {
				position: absolute;
				right: 30rpx;
				top: 50%;
				transform: translateY(-50%);
				width: 180rpx;
				height: 60rpx;
			}
		}

		.list:last-child {
			border: none;
		}
	}

	.yzmben {
		width: 200rpx !important;
		position: absolute;
		right: 20rpx;
	}

	.agree {
		display: flex;
		align-items: center;
		padding-left: 30rpx;
		margin: 30rpx 0;

		image {
			width: 45rpx;
			height: 45rpx;
			margin-right: 10rpx;
		}

		span {
			text-decoration: underline;
		}
	}

	.loginBtn {
		width: 690rpx;
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		margin: 0 auto;
		margin-top: 40rpx;
		border-radius: 10rpx;
		box-sizing: border-box;
	}
</style>